<%--
  Author: DawnFz.com
  Date: 2022/10/18 16:59
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css" media="all">
    <style>
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>

    <style>
        #tbl{ margin-top:15px; margin-left:25px; }
        #tbl th{ height:45px; }
        #tbl td{
            font-weight:normal; height:45px;
            font-family: 微软雅黑, serif; font-size:17px;
        }
        #tbl [type='text']{
            height:28px; font-size:17px;
            text-indent:0.3em;
        }
        #tbl select { width:200px; height:32px; font-size:17px; }

        /* td:nth-child(1){ width:80px; }  */
        /* td:nth-child(2){ width:350px; } */

    </style>

    <c:set var="msg" value="正在加载数据..." />

    <c:if test="${param['op']=='1'}">
        <c:set var="msg" value="更新用户成功..." />
    </c:if>

    <c:if test="${param['op']=='2'}">
        <c:set var="msg" value="更新用户失败..." />
    </c:if>



    <script src="${ctxPath}/static/js/jquery-3.6.1.min.js"></script>
    <script>
        function makeInput( title, id, readonly, val ){
            readonly = (readonly) ? readonly : "";
            console.log( "{debug} val = "+ val );
            val = (val) ? val : "";
            return "<tr>"+
                "<td>"+ title +"</td>"+
                "<td><input type=\"text\" id=\""+ id +"\" name=\""+ id +
                "\" "+ readonly +" value=\""+ val +"\"/></td>"+
                "</tr>";
        }
        function makeSelect( title, id, data, val ){
            let html = "<tr><td>"+ title +"</td>";
            html += "<td><select id=\""+ id +"\" name=\""+ id +"\">";
            for( let i=0; i<data.length; i++ ){
                let d = data[i];
                let selected = ( val===d['val'] ) ? "selected" : "";
                html += "<option value=\""+ d['val'] +"\" "+ selected +">"+
                    d['text'] +"</option>";
            }
            html += "</select></td></tr>";
            return html;
        }

        //"account",json['id']
        function makeHide( id, val ){
            return "<input type=\"hidden\" id=\""+ id
                +"\" value=\""+ val +"\"/>";
        }
        layui.use('layer', function(){
            let $ = layui.jquery;
            let layer = layui.layer;
        });

        function delDeployment( _id ){
            alert( "id = "+ _id );
            $.ajax(
                {
                    url:"${ctxPath}/WorkFlow/delDeployment",
                    type:"post",
                    data:{id:_id},
                    dataType:"json",
                    success:function( data ){
                        if( data['ret']==='success' ){
                            layer.msg( '删除流程成功。' );
                            setTimeout( function(){
                                window.location = '/WorkFlow/list'
                            }, 2000 );
                        }else{
                            layer.msg( '删除流程失败。' );
                        }
                    }
                }
            );
        }
    </script>
</head>
<body>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="cancel">
        取消申请
    </a>
</script>

<!--
 	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
-->

<script src="${ctxPath}/static/layui/layui.js"></script>
<script>
    layui.config({
        version: '1554901098009' //为了更新 js 缓存，可忽略
    });

    layui.use(
        ['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'],
        function(){
            var laydate = layui.laydate //日期
                ,laypage = layui.laypage    //分页
                ,layer = layui.layer        //弹层
                ,table = layui.table        //表格
                ,carousel = layui.carousel //轮播
                ,upload = layui.upload //上传
                ,element = layui.element //元素操作
                ,slider = layui.slider //滑块

            //向世界问个好
            layer.msg('${ msg }');

            //监听Tab切换
            element.on('tab(demo)', function(data){
                layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                    tips: 1
                });
            });

            //执行一个 table 实例
            table.render({
                elem: '#demo'
                ,height: 580
                ,url: '${ctxPath}/Reim/jsonInitiate?initiator=${user.id}' //数据接口
                ,title: '待我审批请假表'
                ,page: true //开启分页
                ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                ,totalRow: false //开启合计行
                ,cols: [[     //表头
                    {type:'checkbox', fixed:'left'}
                    ,{field:'procInstId', title:'流程实例ID', width:100}
                    ,{field:'assigneeName', title:'当前办理人', width:100}
                    ,{field:'title', title:'标题', width:125}
                    ,{field:'price', title:'报销金额', width:125}
                    ,{field:'createTime', title:'创建日期', width:160}
                    ,{field:'finishTime', title:'完成日期', width:160}
                    ,{field:'status', title:'流程状态', width:95}
                    ,{fixed:'right', width: 145, align:'center', toolbar: '#barDemo'}
                ]]
            });


            //监听行工具事件
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                let data = obj.data     //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'cancel'){

                    $.ajax({
                        url: '${ctxPath}/Reim/cancelApprove?procInstId='+ data['procInstId'],
                        type: 'get',
                        dataType: 'json',
                        success: function (resp) {
                            let result = resp['result'];
                            if( result==='success' ){
                                layer.msg( '已成功取消该报销申请。' );
                                setTimeout( function(){
                                    window.location = '${ctxPath}/Reim/myInitiate'
                                }, 1500 );
                            }else{
                                layer.msg( '该申请无法取消' );
                            }
                        }
                    })

                } else if(layEvent === 'del'){

                } else if(layEvent === 'edit'){

                }
            });


            //监听头工具栏事件
            table.on('toolbar(test)', function(obj){
                let checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                    case 'add':
                        layer.msg('添加');
                        break;
                    case 'update':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else if(data.length > 1){
                            layer.msg('只能同时编辑一个');
                        } else {
                            layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                        }
                        break;
                    case 'delete':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else {
                            layer.msg('删除');
                        }
                        break;
                }
            });

            //执行一个轮播实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,height: 200
                ,arrow: 'none' //不显示箭头
                ,anim: 'fade' //切换动画方式
            });

            //将日期直接嵌套在指定容器中
            let dateIns = laydate.render({
                elem: '#laydateDemo'
                ,position: 'static'
                ,calendar: true //是否开启公历重要节日
                ,mark: { //标记重要日子
                    '0-10-14': '生日'
                    ,'2018-08-28': '新版'
                    ,'2018-10-08': '神秘'
                }
                ,done: function(value, date, endDate){
                    if(date.year === 2017 && date.month === 11 && date.date === 30){
                        dateIns.hint('一不小心就月底了呢');
                    }
                }
                ,change: function(value, date, endDate){
                    layer.msg(value)
                }
            });

            //分页
            laypage.render({
                elem: 'pageDemo' //分页容器的id
                ,count: 8        //总页数
                ,skin: '#1E9FFF' //自定义选中色值
                //,skip: true    //开启跳页
                ,jump: function(obj, first){
                    if(!first){
                        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                    }
                }
            });

            //上传
            upload.render({
                elem: '#uploadDemo'
                ,url: '' //上传接口
                ,done: function(res){
                    console.log(res)
                }
            });

            slider.render({
                elem: '#sliderDemo'
                ,input: true //输入框
            });

            //底部信息
            //var footerTpl = lay('#footer')[0].innerHTML;
            //lay('#footer').html(layui.laytpl(footerTpl).render({}))
            //.removeClass('layui-hide');
        });
</script>
</body>
</html>

<!--
//layer.closeAll();
//{ps} 配置一个透明的询问框
//layer.msg( '系统提示: '+ msg,
//   {
//	time: 20000
//	,btnAlign: 'c'   //按钮居中
//	,btn: '确认信息'
//  }
//);
-->


